<template>
	<view class="mainpadding" v-if="pageShow">
		<view class="ershiba xiaohui textcenter margin_top">需支付</view>
		<view class="margin_top1 fonweight textcenter" style="font-size: 60rpx;">￥{{price}}</view>
		<view class="" style="margin-top:90rpx;" v-if="platform!='ios' || (platform=='ios' && isSH==false)">
			<view class=" flexbetween mainpadding " :class="pay_type==10?'yixzbox':'weixbox'" @click="pay_type=10">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="weixin-circle-fill" color="#09BB07" size="28"></u-icon>
					</view>
					<view class="sanshier">微信支付</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=10"></view>
				<view class="margin_right1" v-if="pay_type==10">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
			<view class="flexbetween mainpadding margin_top" :class="pay_type==20?'yixzbox':'weixbox'"
				@click="pay_type=20">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="zhifubao-circle-fill" color="#06B4FD" size="28"></u-icon>
					</view>
					<view class="sanshier">支付宝支付</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=20"></view>
				<view class="margin_right1" v-if="pay_type==20">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="ffffff mainpadding gudingdb" v-if="platform!='ios' || (platform=='ios' && isSH==false)"
			@click="submit">
			<view class="bigbtn">确认支付</view>
		</view>
		<view class="ffffff mainpadding gudingdb" v-if="platform=='ios' && isSH==true" @click="subPaynow()">
			<view class="bigbtn">确认支付</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import {
		Iap,
		IapTransactionState
	} from "@/common/iap.js"
	export default {
		data() {
			return {
				jb_item_id: "",
				price: "",
				pay_type: 10, //支付方式:10=微信,20=支付宝
				openid: "",
				type: 0, //现在只有畅聊时间支付需要传type，(type=1畅聊支付   type=2余额充值)
				platform: "ios", //ios/安卓

				iapChannel: null,
				productId: '', //默认苹果内购商品id 要提前在app store connect 配置 要支付的商品的标识（必须是调用uni.requestPayment返回的有效的商品标识）
				productIds: ['coins_1280', 'coins_1580', 'coins_180', 'coins_60',
					'coins_680'
				], //商品的id 列表,拿后端返回的id(需要和app store中所配置的id一致)
				isSH: false,
				pageShow: false
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg))
			this.price = data.price
			this.jb_item_id = data.jb_item_id
			if (data.type) {
				this.type = data.type
			}
			if (data.product_id) {
				this.productId = data.product_id
			}
			this.platform = uni.getSystemInfoSync().platform
			if (this.platform == "ios") {
				// #ifdef APP-PLUS
				//1.首先调用plus.payment.getChannels获取支付通道，IAP支付通道的ID为“appleiap”
				plus.payment.getChannels((channels) => {
					console.log("获取到channel" + JSON.stringify(channels))
					this.iapChannel = channels.find(i => i.id === 'appleiap')
					console.log("获取到iapChannel" + JSON.stringify(this.iapChannel))
					if (this.iapChannel) {
						this.requestOrder();
					}
					if (!this.iapChannel) {
						this.errorMsg()
					}
				}, (error) => {
					this.errorMsg()
				});
				// #endif

				this.getsystem()
			} else {
				this.pageShow = true
			}

		},
		methods: {
			getsystem() {
				let system = uni.getSystemInfoSync()
				let version_code = system.appVersionCode
				let platform = system.platform
				console.error(version_code, platform, system);
				httpRequest.request('/api/index/checkApply', 'GET', {
					platform,
					version_code
				}).then(res => {

					console.log(res);
					this.isSH = res.data
					this.pageShow = true
				})
			},
			requestOrder() {
				uni.showLoading({
					title: '检测支付环境...'
				})
				this.iapChannel.requestOrder(this.productIds, (orderList) => { //必须调用此方法才能进行 iap 支付
					console.log('requestOrder success666: ' + JSON.stringify(orderList));
					uni.hideLoading();
				}, (e) => {
					console.log('requestOrder failed: ' + JSON.stringify(e));
					uni.hideLoading();
					// this.errorMsg()
				});
			},
			//点击立即支付
			//3.调用uni.requestPayment方法发起支付请求，
			subPaynow() {
				let _this = this
				uni.showLoading({
					title: '支付中...'
				})
				let productId = this.productId
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						productid: productId, //必填
						quantity: 1, //选择的数量  可不填
						username: '' //支付商户的名称 可不填
					},
					success: (e) => {
						console.log('支付成功====', e)
						// 支付成功去验单
						_this.iosPaySuccess(e.payment.productid)
						uni.hideLoading()
					},
					fail: (e) => {
						uni.hideLoading()
						console.log('支付失败,原因为===', e.errMsg)
					},
					complete: () => {
						uni.hideLoading()
						console.log("payment结束")
					},
				})
			},
			errorMsg() {
				uni.showModal({
					content: "暂不支持苹果支付",
					showCancel: false
				})
			},
			iosPaySuccess(product_id) {
				httpRequest.request("/api/Rechargecl/applenotify", 'GET', {
					product_id,
				}).then(res => {
					if (res.code == 1) {
						uni.navigateBack(1)
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			submit() {
				let data = {//金币充值
					jb_item_id: this.jb_item_id,
					pay_type: this.pay_type,
					openid: this.openid
				}
				let url = "/api/Rechargecl/rechargeMoney"
				if (this.type == 1) { //畅聊支付
					data = {
						chatcard_id: this.jb_item_id,
						pay_type: this.pay_type,
						openid: this.openid
					}
					url = "/api/Chatcardcl/rechargeChat"
				}
				if (this.type == 2) { //余额充值
					data = {
						price: this.price,
						pay_type: this.pay_type,
						openid: this.openid
					}
					url = "/api/Rechargemoney/rechargeMoney"
				}
				httpRequest.request(url, 'POST', data).then(res => {
					if (this.pay_type == 10) { //微信支付
						console.log("微信支付》》》》》》", res);
						this.appcallPayMent(res.data.appconfig)
					} else { //支付宝支付
						this.appcallPayMentzfb(res.data.appconfig)
					}
				})
			},
			appcallPayMent(data) { //微信app支付
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			appcallPayMentzfb(data) { //支付宝支付
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						if (this.type == 1) { //给聊天界面发送个事件更新畅聊时常
							uni.$emit("changliaofn", "")
						}
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.weixbox {
		background: #FBFCFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 1rpx solid #FBFCFF;
	}

	.yixzbox {
		background: rgba(35, 97, 255, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 1rpx solid #2361FF;
	}
</style>